<template>

		<view class="uni-padding-wrap uni-common-mt">


			<view class="uni-title uni-common-mt">
				flex-direction: row
				<text>\n横向布局</text>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item uni-bg-red">A</view>
				<view class="flex-item uni-bg-green">B</view>
				<view class="flex-item uni-bg-blue">C</view>
			</view>
			
			
			<view class="uni-title uni-common-mt">
				flex-direction: column
				<text>\n纵向布局</text>
			</view>
			<view class="uni-flex uni-column">
				<view class="flex-item flex-item-V uni-bg-red">A</view>
				<view class="flex-item flex-item-V uni-bg-green">B</view>
				<view class="flex-item flex-item-V uni-bg-blue">C</view>
			</view>


			<view class="uni-title uni-common-mt">
				flex-direction: row 横向布局
				<text> \n 里面某个子项目flex-direction: column 纵向布局</text>
			</view>
			
			
			<view class="uni-flex uni-row">
				
				<view class="flex-item uni-bg-red">A</view>
				
				<view class="flex-item uni-bg-blue uni-flex uni-column">
					
					<view class="flex-item flex-item-V2 uni-bg-blue">B1</view>
					<view class="flex-item flex-item-V2 uni-bg-green">B2</view>
					<view class="flex-item flex-item-V2 uni-bg-blue">B3</view>
					
				</view>
				
				
			</view>
			
			
			
			<view class="uni-flex uni-row">
				<view class="text uni-flex"
					style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
					<image src="@/static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
				</view>

				<view class="uni-flex uni-column"
					style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
					<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
						文字居左，留出左间距
					</view>

					<view class="uni-flex uni-row">
						<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view>
					</view>
				</view>

			</view>

		</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.flex-item {
		width: 50%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V2 {
		width: 100%;
		height: 66rpx;
		text-align: center;
		line-height: 66rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
</style>